<template>
    <div>
        <!-- 注册页 
        <br>
        使用手机号登录自动创建账号
        <br>
        其他登录方式同样自动创建账号 -->
        <van-nav-bar left-text="返回" title="用户名注册" left-arrow @click-left="onClickLeft" />
        <van-form>
			<van-cell-group inset>
				<van-field
					v-model="username"
					name="username"
					label="用户名"
					placeholder="请输入用户名"
					:rules="[{ required: true, message: '请填写用户名' }]"
				/>
				<van-field
					v-model="password"
                    type="password"
					name="password"
					label="密码"
					placeholder="请输入密码"
					:rules="[{ required: true, message: '请填写密码' }]"
				/>
				<van-field
					v-model="nick"
					name="nick"
					label="昵称"
					placeholder="请输入昵称"
					:rules="[{ required: true, message: '请填写昵称' }]"
				/>
                <!-- 图片 -->
                <!-- <van-uploader :after-read="afterRead" /> -->

				<van-field
					v-model="dxpassword"
					name="dxpassword"
					label="验证码"
					placeholder="请输入验证码"
					:rules="[{ required: true, message: '请填写验证码' }]"
				>
				<template #button>
				<van-button  @click="sendcaptcha" size="small" type="primary">发送验证码</van-button>
				</template>
            </van-field>
			</van-cell-group>

			<div style="margin: 16px">
				<van-button 
				@click="onSubmit"
				round 
				block 
				color="linear-gradient(to right, #ff6034, #ee0a24)" 
				native-type="submit"> 注册 </van-button>
			</div>
		</van-form>

		
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RequestRegister, RequestCaptcha } from "@/api/user"
import router from '@/router';
import { Notify } from 'vant';


const username = ref('')
const password = ref('')
const nick = ref('')
const dxpassword = ref('')

// 注册
const onSubmit = async () => {
	const res = await RequestRegister(username.value,password.value,nick.value,dxpassword.value)
	if(res.data.code == 200){
		Notify({type:"success",message:"注册成功/修改密码成功"})
		router.push({path:'/login/userlogin'})
	}else{
		Notify({type:"danger",message:"注册失败"})
	}
}


// 发送验证码
const sendcaptcha = async () => {
	console.log(username.value);
	const res = await RequestCaptcha(username.value)
	console.log(res);
	if(res.data.code == 200){
		Notify({type:"success",message:"短信发送成功"})
	}else{
		Notify({type:"danger",message:"短信超出今日发送上线"})
	}
}

const onClickLeft = () => {
	history.back()
}

</script>

<style scoped>

</style>